<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, DOM Overlay! • A-Frame</title>
    <meta name="description" content="Hello, World! • A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
    <style>
      /* By default, hide the DOM Overlay element. */
      #overlay {
          display: none;
      }
      /* Show the DOM Overlay element while active (:xr-overlay pseudoclass) */
      #overlay:xr-overlay {
          display: initial;
      }
      #greeting {
          background-color: rgba(1, 1, 1, 0.25);
          margin: 10px;
      }
      #exit-ar {
          position: absolute;
          right: 40px;
          bottom: 40px;
          background: rgba(127,127,127,0.25);
          color: white;
          border: 1px solid rgba(255,255,255,0.25);
          padding: 6px 8px;
          font-weight: bold;
      }
    </style>
    <script>
      AFRAME.registerComponent('exit-ar-button', {
        schema: {
            element: {type: 'selector'}
        },
        init: function () {
          this.data.element.addEventListener('click', ev => {
              this.el.sceneEl.renderer.xr.getSession().end();
          });
        }
      });
    </script>
  </head>
  <body>
    <div id="overlay">
      <span id="greeting">
        Hi, I'm the DOM Overlay
      </span>
      <button id="exit-ar">Exit AR</button>
    </div>
    <a-scene background="color: #ECECEC"
             webxr="optionalFeatures: dom-overlay; overlayElement: #overlay">
      <a-entity exit-ar-button="element: #exit-ar"></a-entity>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
    </a-scene>
  </body>
</html>
